<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签管理</title>
    <!-- 引入 Semantic UI 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
     <link rel="stylesheet" href="css/标签管理.css" />
</head>
<body>

    <!-- 导航栏 -->
    <nav class="ui inverted  attached segment m-padded-tb-mini">
    	<div class="ui container">
    	<div class="ui inverted secondary menu">
    		<h2 class="ui teal header item">管理后台</h2>
    		<a class="item" href="首页.html">
    		    <i class="home icon"></i> 博客首页
    		</a>
    		<a class="item" href="文章管理.html">
    		    <i class="write icon"></i> 文章管理
    		</a>
    		<a class="item" href="文章发布.html">
    		    <i class="edit icon"></i> 文章发布
    		</a>
    		<a class="item" href="分类管理.html">
    		    <i class="folder open icon"></i> 分类管理
    		</a>
    		<a class="item active" href="标签管理.html">
    		    <i class="tag icon"></i> 标签管理
    		</a>
    		<a class="item" href="用户管理.html">
    		    <i class="settings icon"></i> 用户管理
    		</a>
    		<div class="right menu">
    			<div class="ui dropdown item">
    				<div class="text">
    					<img class="ui avatar image" src="images/屏幕截图 2024-04-28 125007.png">
    					用户名
    				</div>
    				<i class="dropdown icon"></i>
    				<div class="menu">
    					<a href="#" class="item">注销</a>
    					
    				</div>	
    			</div>
    			
    		</div>
    		</div>
    	</div>
    </nav>

    <!-- 页面内容 -->
    <div class="main container">
        <h1 class="ui header">标签管理</h1>

        <!-- 新增标签按钮 -->
        <button class="ui button primary" onclick="showAddTagModal()">
            <i class="plus icon"></i>
            新增标签
        </button>

        <div class="ui segment tag-list">
            <table class="ui very basic table">
                <thead>
                    <tr>
                        <th>标签名称</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>标签1</td>
                        <td>
                            <button class="ui button" onclick="showEditTagModal('标签1')">
                                <i class="edit icon"></i>
                                编辑
                            </button>
                            <button class="ui button" onclick="showDeleteTagModal('标签1')">
                                <i class="trash icon"></i>
                                删除
                            </button>
                        </td>
                    </tr>
                    <!-- 更多标签列表项 -->
                </tbody>
				<tfoot>
				    <tr>
				        <th colspan="7">
				            <div class="ui right floated pagination menu">
				                <a class="icon item" href="#">
				                    <i class="left chevron icon"></i>
				                </a>
				                <a class="item" href="#">1</a>
				                <a class="item" href="#">2</a>
				                <a class="item" href="#">3</a>
				                <a class="icon item" href="#">
				                    <i class="right chevron icon"></i>
				                </a>
				            </div>
				        </th>
				    </tr>
				</tfoot>
            </table>
        </div>
    </div>

    <!-- 新增标签模态框 -->
    <div class="ui modal" id="addTagModal">
        <div class="header">
            新增标签
        </div>
        <div class="content">
            <div class="ui form">
                <div class="field">
                    <label>标签名称</label>
                    <input type="text" id="tagName" placeholder="请输入标签名称">
                </div>
            </div>
        </div>
        <div class="actions">
            <div class="ui button deny">取消</div>
            <div class="ui button positive right labeled icon" onclick="addTag()">
                确定
                <i class="checkmark icon"></i>
            </div>
        </div>
    </div>

    <!-- 引入 Semantic UI 的 JavaScript 文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
   <script src="js/标签管理.js"></script>
</body>
</html>